<template>
	<view class="find">
		<van-dialog id="van-dialog"/>
		<view class="phone">
			<image src="../../static/phone.jpg" ></image>
			<input type="text" v-model="userPhone.phone" placeholder="请输入手机号"/>
		</view>
		<view class="verification">
			<view class="acquire">
				<image src="../../static/anquan.jpg" ></image>
				<input type="text" v-model="userPhone.verificationCode" placeholder="请输入验证码"/>
			</view>
			<view v-if="!temp" class="gain" @click="note">获取验证码</view>
			<view v-else style="color: #007AFF;">{{time}}s</view>
		</view>
		<view class="password">
			<view class="pwd">
				<image src="../../static/密码.png" ></image>
				<input v-if="reveal" v-model="userPhone.password" placeholder="请输入新密码" type="password" />
				<input v-else v-model="userPhone.password" placeholder="请输入新密码" type="text" />
			</view>
			<view @click="showPwd">
				<image v-if="reveal" class="eye-image" src="../../static/不显示.png"></image>
				<image v-else class="eyes-image" src="../../static/眼睛.png"></image>
			</view>
		</view>
		<view class="enter" @click="enter">确认</view>
		<view class="already-have">
			已有账号,
			<span @click="goLogin" class="already">立即登录</span>
		</view>
	</view>
</template>

<script>
	import { noteLogin,forgetPwd } from "../../api/login.js"
	import Dialog from '../../wxcomponents/vant-weapp/dialog/dialog'
	export default{
		data(){
			return{
				reveal:true,
				time:60,
				temp:false,
				userPhone:{
					phone:"",
					account:"",
					verificationCode:"",
					password:""
				}
			}
		},
		methods:{
			showPwd() {
				this.reveal = this.reveal ? false : true
			},
			note(){
				if(this.userPhone.phone && this.userPhone.phone.trim().length==11){
					let self = this
					noteLogin(this.userPhone).then(res=>{
						uni.hideLoading();
						self.temp = true
					 	let timekeeping = setInterval(
							function(){
								self.time-=1
								if(self.time == 0){
									self.time = 60
									self.temp = false
									window.clearInterval(timekeeping)
								}
							}
						,1000)
					})
				}else{
					Dialog({
						title:"系统提示",
						message:"请填写正确手机号",
					})
				}
				
			},
			enter(){
				if(!this.userPhone.phone || this.userPhone.phone.trim().length!=11){
					Dialog({
						title:"系统提示",
						message:"请填写正确手机号",
					})
				}else if(!this.userPhone.verificationCode || this.userPhone.verificationCode.trim().length<4){
					Dialog({
						title:"系统提示",
						message:"请填写正确验证码",
					})
				}else if(!this.userPhone.password || this.userPhone.password.trim().length<6){
					Dialog({
						title:"系统提示",
						message:"请填写正确密码",
					})
				}else{
					forgetPwd(this.userPhone).then(res=>{
						uni.hideLoading();
						if(res.success){
							uni.navigateTo({
								url:"../index/index"
							})
						}else{
							Dialog({
								title:"系统提示",
								message:res.message,
							})
						}
					})
				}
			},
			goLogin(){
				uni.navigateTo({
					url:"login?cur="+1
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.find{
		font-size: 32rpx;
		margin-top: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.phone{
			width: 80vw;
			display: flex;
			border-bottom: solid 1px #a1a1a1;
			margin: 10rpx 80rpx;
			padding: 10rpx;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
		}
		.verification{
			width: 80vw;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1px #a1a1a1;
			margin: 10rpx 80rpx;
			padding: 10rpx;
			.acquire{
				display: flex;
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}
			.gain{
				color: #007AFF;
			}
			
		}
		.password{
			width: 80vw;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1px #a1a1a1;
			margin: 10rpx 80rpx;
			padding: 10rpx;
			.pwd{
				display: flex;
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.enter{
			margin-top: 40rpx;
			display: inline-block;
			box-sizing: content-box;
			text-align: center;
			background: #007AFF;
			border-radius: 20rpx;
			color: #FFFFFF;
			width: 120rpx;
			padding: 20rpx 140rpx;
		}
		.already-have{
			margin-top: 20rpx;
			.already{
				color: #007AFF;
			}
		}
	}
</style>
